import 'package:badges/badges.dart';
import 'package:flutter/material.dart';
import 'package:gw_github_flutter/common/route_name.dart';

class ButtonRoute extends StatefulWidget {
  ButtonRoute({Key? key}) : super(key: key);

  @override
  State<ButtonRoute> createState() => _ButtonRouteState();
}

class _ButtonRouteState extends State<ButtonRoute> {

  GlobalKey btnKey = GlobalKey(debugLabel: "btnKey");
  bool btn_disable = false;
  bool btn_select = false;

  var isSelected1 = [false, false, true];
  var isSelected2 = [false, false, true];
  var isSelected3 = [false, false, true];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(RouteName.buttonRoute),
      ),
      body: ListView(
        children: [
          _normelWrapBtn(),
          _badgeBtn(),
          _toggleButtonsGroup(),
          const SizedBox(
            height: 20,
          )
        ],
      ),
    );
  }

  Widget _normelWrapBtn() {
    return Column(
      children: [
        Wrap(
          spacing: 10,
          children: [
            ElevatedButton(
              child: Text("ElevatedButton"),
              onPressed: () {},
            ),
            TextButton(
              onPressed: () {},
              child: const Text("TextButton"),
            ),
            OutlinedButton(
              child: const Text("OutlinedButton"),
              onPressed: () {},
            ),

            Badge(
              shape: BadgeShape.square,
              borderRadius: BorderRadius.circular(10),
              showBadge: true,
              padding: EdgeInsets.symmetric(vertical: 2, horizontal: 5),
              badgeContent: Text(
                "25555",
                style: TextStyle(fontSize: 10),
              ),
              child: ElevatedButton.icon(
                icon: const Icon(Icons.send),
                label: const Text("发送"),
                onPressed: () {},
              ),
            ),
            Badge(
              child: OutlinedButton.icon(
                icon: const Icon(Icons.add),
                label: const Text("添加"),
                onPressed: () {},
              ),
            ),
            TextButton.icon(
              icon: const Icon(Icons.info),
              label: const Text("详情"),
              onPressed: () {},
            ),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  btn_disable = !btn_disable;
                  btn_select = !btn_select;
                });
              },
              style: ButtonStyle(
                  backgroundColor: MaterialStateProperty.all(
                      btn_select ? Colors.blue : Colors.red),
                  // 边框
                  side: MaterialStateProperty.all(BorderSide(
                      color: btn_select ? Colors.lightGreen : Colors.green,
                      width: 2)),
                  // 圆角
                  shape: MaterialStateProperty.all(const RoundedRectangleBorder(
                      borderRadius: BorderRadius.zero))),
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Icon(
                    Icons.info,
                    color: btn_select ? Colors.lightGreen : Colors.green,
                  ),
                  const SizedBox(
                    width: 10,
                  ),
                  Text(
                    "ElevatedButton",
                    style: TextStyle(
                        color: btn_select ? Colors.lightGreen : Colors.green),
                  )
                ],
              ),
            ),
//             const ButtonStyle({
//   this.textStyle, //字体
//   this.backgroundColor, //背景色
//   this.foregroundColor, //前景色
//   this.overlayColor, // 高亮色，按钮处于focused, hovered, or pressed时的颜色
//   this.shadowColor, // 阴影颜色
//   this.elevation, // 阴影值
//   this.padding, // padding
//   this.minimumSize, //最小尺寸
//   this.side, //边框
//   this.shape, //形状
//   this.mouseCursor, //鼠标指针的光标进入或悬停在此按钮的[InkWell]上时。
//   this.visualDensity, // 按钮布局的紧凑程度
//   this.tapTargetSize, // 响应触摸的区域
//   this.animationDuration, //[shape]和[elevation]的动画更改的持续时间。
//   this.enableFeedback, // 检测到的手势是否应提供声音和/或触觉反馈。例如，在Android上，点击会产生咔哒声，启用反馈后，长按会产生短暂的振动。通常，组件默认值为true。
// });
            ElevatedButton(
              key: btnKey,
              onPressed: btn_disable ? null : (() {}),
              style: ButtonStyle(
                  backgroundColor: MaterialStateProperty.resolveWith((states) {
                    if (states.contains(MaterialState.disabled)) {
                      // 当点击事件为null时
                      return Colors.yellow;
                    }
                    return Colors.red;
                  }),
                  // 边框
                  side: MaterialStateProperty.all(
                      const BorderSide(color: Colors.green, width: 2)),
                  // 圆角
                  shape: MaterialStateProperty.all(const RoundedRectangleBorder(
                      borderRadius: BorderRadius.zero))),
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: const [
                  Icon(
                    Icons.info,
                    color: Colors.lightGreen,
                  ),
                  SizedBox(
                    width: 10,
                  ),
                  Text(
                    "ElevatedButton",
                    style: TextStyle(color: Colors.lightGreen),
                  )
                ],
              ),
            ),
          ],
        )
      ],
    );
  }

  Widget _shoppingCartBadge() {
    return Badge(
      position: BadgePosition.topEnd(top: 10, end: 3),
      animationDuration: const Duration(milliseconds: 300),
      animationType: BadgeAnimationType.slide,
      badgeContent: const Text(
        "25",
        style: TextStyle(color: Colors.white),
      ),
      child: IconButton(icon: Icon(Icons.shopping_cart), onPressed: () {}),
    );
  }

  Widget _badgeBtn() {
    return Column(
      children: [
        Container(
          margin: const EdgeInsets.all(10),
          child: const Text(
            "_badgeBtn",
            style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),
          ),
        ),
        Wrap(
          spacing: 10,
          children: [
            Badge(
              position: BadgePosition.topEnd(top: 10, end: 10),
              badgeContent: null,
              child: IconButton(
                icon: const Icon(Icons.menu),
                onPressed: () {},
              ),
            ),
            Badge(
              showBadge: false,
              child: IconButton(
                icon: const Icon(Icons.thumb_up),
                onPressed: () {},
              ),
            ),
            Badge(
              position: BadgePosition.topEnd(top: 0, end: -10),
              shape: BadgeShape.square,
              borderRadius: BorderRadius.circular(10),
              showBadge: true,
              padding: const EdgeInsets.symmetric(vertical: 2, horizontal: 5),
              badgeContent: const Text(
                "25555",
                style: TextStyle(fontSize: 10, color: Colors.white),
              ),
              child: ElevatedButton.icon(
                icon: const Icon(Icons.send),
                label: const Text("发送"),
                onPressed: () {},
              ),
            ),
            Badge(
              position: BadgePosition.topEnd(top: 2, end: -2),
              child: OutlinedButton.icon(
                icon: const Icon(Icons.add),
                label: const Text("添加"),
                onPressed: () {},
              ),
            ),
            Badge(
              position: BadgePosition.topEnd(top: 10, end: 10),
              badgeContent: null,
              child: IconButton(
                icon: Icon(Icons.menu),
                onPressed: () {},
              ),
            ),
            Badge(
              position: BadgePosition.topEnd(top: -5, end: -10),
              animationDuration: const Duration(milliseconds: 300),
              animationType: BadgeAnimationType.slide,
              shape: BadgeShape.square,
              borderRadius: BorderRadius.circular(10),
              padding: const EdgeInsets.symmetric(vertical: 2, horizontal: 5),
              badgeContent: const Text(
                "2525",
                style: TextStyle(color: Colors.white),
              ),
              child:
                  IconButton(icon: Icon(Icons.shopping_cart), onPressed: () {}),
            )
          ],
        )
      ],
    );
  }

  Widget _toggleButtonsGroup() {
    return Column(
      children: [
        Container(
          padding: const EdgeInsets.only(left: 14.0, top: 14.0),
          child: const Text(
            "_toggleButtonsGroup",
            style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),
          ),
        ),
        const Text('双选'),
        ToggleButtons(
          onPressed: (int index) {
            setState(() {
              isSelected1[index] = !isSelected1[index];
            });
          },
          isSelected: isSelected1,
          children: const [
            Icon(Icons.ac_unit),
            Icon(Icons.call),
            Icon(Icons.cake),
          ],
        ),
        const SizedBox(height: 20),
        const Text('单选'),
        ToggleButtons(
          onPressed: (int index) {
            setState(() {
              for (int buttonIndex = 0;
                  buttonIndex < isSelected2.length;
                  buttonIndex++) {
                if (buttonIndex == index) {
                  isSelected2[buttonIndex] = true;
                } else {
                  isSelected2[buttonIndex] = false;
                }
              }
            });
          },
          isSelected: isSelected2,
          children: const [
            Icon(Icons.ac_unit),
            Icon(Icons.call),
            Icon(Icons.cake),
          ],
        ),
        // fancy
        const SizedBox(height: 20),
        const Text('fancy'),
        ToggleButtons(
          borderColor: Colors.blueGrey,
          borderWidth: 5,
          selectedBorderColor: Colors.blue,
          splashColor: Colors.yellow,
          borderRadius: BorderRadius.circular(10),
          onPressed: (int index) {
            setState(() {
              for (int buttonIndex = 0;
                  buttonIndex < isSelected3.length;
                  buttonIndex++) {
                if (buttonIndex == index) {
                  isSelected3[buttonIndex] = true;
                } else {
                  isSelected3[buttonIndex] = false;
                }
              }
            });
          },
          isSelected: isSelected3,
          children: const [
            Icon(Icons.ac_unit),
            Icon(Icons.call),
            Text('cake'),
          ],
        ),
      ],
    );
  }
}
